<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        *{
            margin: 20px 20px;
        }
        .demo1{
            height: 50px;
            background-color: skyblue;
        }
        .box1{
            padding: 15px;
            background-color: skyblue;
        }
        .box2{
            padding: 15px;
            background-color: orange;
        }
        .list{
            width: 200px;
            height: 200px;
            background-color: pink;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
    <!-- 
    vue中的事件修饰符
    1.prevent   阻止默认事件（常用）
    2.stop      阻止事件冒泡（常用）
    3.once      事件只触发一次（常用）
    4.capture   使用事件的捕获模式
    5.self      只有 event.target 是当前操作的元素，才触发
    6.passive   事件的默认行为立即执行，无需等待事件回调执行完毕
    
    事件先捕获再冒泡执行
    比如点击子元素，先捕获到父元素，然后捕获子元素；执行顺序反过来，相当于栈执行顺序
    默认是冒泡执行，如果想让执行顺序按捕获顺序进行，使用capture

    passive移动端可能会用

    修饰符可以连续写：@click.prevent.stop   既阻止默认事件又阻止冒泡
    -->
     <div id="root">
        <h1>{{name}}</h1>
        <!-- @click.prevent 和 e.preventDefault()一样，都是阻止默认事件 -->
        <!-- 1.阻止默认事件（常用） -->
        <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
        <!-- 2.阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">阻止事件冒泡到父亲</button>
        </div>
        <!-- 3.事件只触发一次（常用） -->
        <button @click.once="showInfo">只触发一次</button>
        <!-- 使用事件的捕获模式 -->
         <div class="box1" @click.capture="showMsg(1)">
            box1
            <div class="box2" @click="showMsg(2)">box2</div>
         </div>
         <!-- 只有 event.target 是当前操作的元素，才触发 -->
         <div class="demo1" @click.self="showInfo">
            @click.self要给其他不想执行的加
            <button @click="showInfo">只有 event.target 是当前操作的元素，才触发</button>
        </div>
        <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕
         (用wheel不加passive如果触发的函数执行很慢，滚动条需要等待执行结束才滚，
         scroll没有这个问题) -->
         <ul @wheel.passive="scrollFunc" class="list">
            <!-- 
                @wheel  是鼠标滚轮（物理，内容浏览完了继续滚鼠标依然计数）
                @scroll 是滚动条
            -->
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
         </ul>
     </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm=new Vue({
            data:{
                name:"尚硅谷"
            },
            methods: {
                showInfo(e){
                    // e.stopPropagation 约等于 @click.stop ,但是前者阻止方法冒泡，而 @click.stop 是使用的子元素事件不会往父级冒
                    // 比如三级级嵌套要想阻止所有冒泡，要在 子、孙级使用@click.stop
                    // e.stopPropagation(); 
                    // e.preventDefault(); // 约等于 @click.prevent
                    console.log(e.target);
                },
                showMsg(msg){
                    console.log(msg);
                },
                scrollFunc(){
                    // 当鼠标滚轮滚动时，这个函数事件处理完了才处理默认事件
                    // 也就是函数还没执行完，滚动条都不走
                    // 不过现在应该是做了优化，虽然不是立马执行，但函数没执行完滚动条也可以走
                    for (let index = 0; index < 50000; index++) {
                        console.log("↓");
                    }
                    console.log("累坏了！");
                }
            },
        })
        vm.$mount("#root")
    </script>
</body>
</html>